<template>
  <div id="app">
    <h2>及时预警</h2>
    <div class="line"></div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column
        prop="name"
        label="指标名称"
        width="250"
      ></el-table-column>
      <el-table-column prop="unit" label="单位" width="120"></el-table-column>
      <el-table-column prop="value" label="数值"></el-table-column>
      <el-table-column
        prop="direction"
        label="方向"
        width="60"
      ></el-table-column>
      <el-table-column label="预警状态">
        <template #default="{ row }">
          <el-badge
            :is-dot="true"
            :type="row.status === 'danger' ? 'danger' : 'success'"
          >
            <span></span>
            <!-- 需要有一个子元素承载 badge -->
          </el-badge>
        </template>
      </el-table-column>
    </el-table>

    <div class="custom-pagination">
      <!-- 自定义每页条数选择器 -->
      <el-select
        v-model="pageSize"
        @change="handleSizeChange"
        class="custom-sizes"
      >
        <el-option
          v-for="size in pageSizes"
          :key="size"
          :label="`${size} 条/页`"
          :value="size"
        >
          <span>{{ size }}页/条</span>
        </el-option>
      </el-select>

      <!-- 分页器其他部分 -->
      <el-pagination layout="prev, pager, next, jumper" :total="total" />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pageSizes: [5, 10, 20], // 可选项
      pageSize: 10,
    }
  },
}

const tableDat = [
  {
    name: '淡水养殖量',
    unit: '万吨',
    value: '',
    direction: '',
    status: 'danger',
  },
  {
    name: '环境空气质量达标率',
    unit: '%',
    value: '',
    direction: '-',
    status: 'success',
  },
  {
    name: '万元GDP电耗',
    unit: '万千瓦时/亿元',
    value: '',
    direction: '+',
    status: 'danger',
  },
  {
    name: '规模以上服务业营利性服务业产值',
    unit: '亿元',
    value: '',
    direction: '-',
    status: 'success',
  },
  { name: '造林面积', unit: '亩', value: '', direction: '', status: 'success' },
  {
    name: '生活垃圾焚烧量',
    unit: '吨',
    value: '',
    direction: '+',
    status: 'success',
  },
  {
    name: '食品进出口总值',
    unit: '亿元',
    value: '',
    direction: '+',
    status: 'success',
  },
  {
    name: '外商投资企业数',
    unit: '个',
    value: '',
    direction: '+',
    status: 'success',
  },
  {
    name: '教育业总收入',
    unit: '亿元',
    value: '',
    direction: '+',
    status: 'success',
  },
  {
    name: '城市维持运营资金收入',
    unit: '万元',
    value: '',
    direction: '+',
    status: 'success',
  },
  {
    name: '公共图书馆藏书总册数',
    unit: '千册/平方公里',
    value: '',
    direction: '+',
    status: 'success',
  },
  {
    name: '人均服务费',
    unit: '元/人',
    value: '',
    direction: '+',
    status: 'success',
  },
  {
    name: '在岗职工平均工资',
    unit: '元',
    value: '',
    direction: '+',
    status: 'success',
  },
  {
    name: '城镇居民人均可支配收入',
    unit: '元',
    value: '',
    direction: '+',
    status: 'success',
  },
]
</script>
<style lang="scss" scoped>
#app {
  background-color: #072658 !important;
  width: 100%;
  height: 100%;
  overflow: hidden;
  h2 {
    margin-top: 100px;
  }
  .line {
    width: 700px;
    height: 5px;
    background-color: #164b90;
    margin-top: 15px;
    margin-bottom: 20px;
  }
  :deep(.el-table) {
    // border: 2px solid #004082;
    width: 650px !important;
    margin-left: 30px;

    .el-table__cell {
      border: 2px solid #004082;
      background-color: #092e6a;
      color: white;
      text-align: center !important;
    }
    tr:hover > td {
      background-color: #072658 !important;
    }
    .el-badge__content.is-dot {
      width: 18px;
      height: 18px;
      border-radius: 50% !important;
    }
  }

</script>

<style scoped>
.custom-pagination {
  display: flex;
  align-items: center;
  gap: 16px;

}

/* 自定义选项样式 */
::v-deep .custom-sizes .el-select-dropdown__item {
  display: flex;
  align-items: center;
  gap: 8px;
}

::v-deep .el-select {
  width: 100px;
  background-color: aqua !important;
  color: aliceblue;
}
::v-deep .el-select .el-input__inner {
  background-color: blue !important;
  color: aliceblue;
}
::v-deep .el-select__wrapper {
  background-color: #1479b4;
  color: white;
}
::v-deep .el-select__placeholder {
  color: #e1e5eb;
}
::v-deep .el-select__wrapper.is-focused {
  box-shadow: 0 0 0 1px #0681dd;
}
</style>
